<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Neon Admin Panel">
    <meta name="author" content="">

    <title>小学期</title>


    <link rel="stylesheet" href="static/css/jquery-ui-1.10.3.custom.min.css">
    <link rel="stylesheet" href="static/css/entypo.css">
    <link rel="stylesheet" href="static/css/css.css">
    <link rel="stylesheet" href="static/css/bootstrap.css">
    <link rel="stylesheet" href="static/css/neon-core.css">
    <link rel="stylesheet" href="static/css/neon-theme.css">
    <link rel="stylesheet" href="static/css/neon-forms.css">
    <link rel="stylesheet" href="static/css/custom.css">

    <script src="static/js/jquery-1.11.0.min.js"></script>

    <!--[if lt IE 9]><script src="assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->


</head>
<body class="page-body" data-url="http://neon.dev">

<div class="page-container"><!-- add class "sidebar-collapsed" to close sidebar by default, "chat-visible" to make chat appear always -->

    <div class="sidebar-menu">



       <div>    <h1 style="color: white">仓库</h1></div>






        <ul id="main-menu" class="">
            <!-- add class "multiple-expanded" to allow multiple submenus to open -->
            <!-- class "auto-inherit-active-class" will automatically add "active" class for parent elements who are marked already with class "active" -->
            <!-- Search Bar -->
            <li id="search">
                <form method="get" action="">
                    <input type="text" name="q" class="search-input" placeholder="Search something...">
                    <button type="submit">
                        <i class="entypo-search"></i>
                    </button>
                </form>
            </li>
            <li>
                <a href="index.html">
                    <i class="entypo-gauge"></i>
                    <span>Dashboard</span>
                </a>
                <ul>
                    <li>
                        <a href="index.html">
                            <span>Dashboard 1</span>
                        </a>
                    </li>
                    <li>
                        <a href="dashboard-2.html">
                            <span>Dashboard 2</span>
                        </a>
                    </li>
                    <li>
                        <a href="dashboard-3.html">
                            <span>Dashboard 3</span>
                        </a>
                    </li>
                    <li>
                        <a href="skin-black.html">
                            <span>Skins</span>
                        </a>
                        <ul>
                            <li>
                                <a href="skin-black.html">
                                    <span>Black Skin</span>
                                </a>
                            </li>
                            <li>
                                <a href="skin-white.html">
                                    <span>White Skin</span>
                                </a>
                            </li>
                            <li>
                                <a href="skin-purple.html">
                                    <span>Purple Skin</span>
                                </a>
                            </li>
                            <li>
                                <a href="skin-cafe.html">
                                    <span>Cafe Skin</span>
                                </a>
                            </li>
                            <li>
                                <a href="skin-red.html">
                                    <span>Red Skin</span>
                                </a>
                            </li>
                            <li>
                                <a href="skin-green.html">
                                    <span>Green Skin</span>
                                </a>
                            </li>
                            <li>
                                <a href="skin-yellow.html">
                                    <span>Yellow Skin</span>
                                </a>
                            </li>
                            <li>
                                <a href="skin-blue.html">
                                    <span>Blue Skin</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    <span>More themes</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="highlights.html">
                            <span>What's New</span>
                            <span class="badge badge-success badge-roundless">v1.7</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="mailbox.html">
                    <i class="entypo-mail"></i>
                    <span>Mailbox</span>
                    <span class="badge badge-secondary">8</span>
                </a>
                <ul>
                    <li>
                        <a href="mailbox.html">
                            <i class="entypo-inbox"></i>
                            <span>Inbox</span>
                        </a>
                    </li>
                    <li>
                        <a href="mailbox-compose.html">
                            <i class="entypo-pencil"></i>
                            <span>Compose Message</span>
                        </a>
                    </li>
                    <li>
                        <a href="mailbox-message.html">
                            <i class="entypo-attach"></i>
                            <span>View Message</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="forms-main.html">
                    <i class="entypo-doc-text"></i>
                    <span>Forms</span>
                </a>
                <ul>
                    <li>
                        <a href="forms-main.html">
                            <span>Basic Elements</span>
                        </a>
                    </li>
                    <li>
                        <a href="forms-advanced.html">
                            <span>Advanced Plugins</span>
                        </a>
                    </li>
                    <li>
                        <a href="forms-wizard.html">
                            <span>Form Wizard</span>
                        </a>
                    </li>
                    <li>
                        <a href="forms-validation.html">
                            <span>Data Validation</span>
                        </a>
                    </li>
                    <li>
                        <a href="forms-masks.html">
                            <span>Input Masks</span>
                        </a>
                    </li>
                    <li>
                        <a href="forms-sliders.html">
                            <span>Sliders</span>
                        </a>
                    </li>
                    <li>
                        <a href="forms-file-upload.html">
                            <span>File Upload</span>
                        </a>
                    </li>
                    <li>
                        <a href="forms-wysiwyg.html">
                            <span>Editors</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="tables-main.html">
                    <i class="entypo-window"></i>
                    <span>进货管理</span>
                </a>
                <ul>
                    <li>
                        <a href="tables-main.html">
                            <span>进货/退货</span>
                        </a>
                    </li>
                    <li>
                        <a href="tables-datatable.html">
                            <span>进货单</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li class="active">
                <a href="">
                    <i class="entypo-chart-bar"></i>
                    <span>Charts</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="entypo-flow-tree"></i>
                    <span>Menu Levels</span>
                </a>
                <ul>
                    <li>
                        <a href="#">
                            <i class="entypo-flow-line"></i>
                            <span>Menu Level 1.1</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="entypo-flow-line"></i>
                            <span>Menu Level 1.2</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="entypo-flow-line"></i>
                            <span>Menu Level 1.3</span>
                        </a>
                        <ul>
                            <li>
                                <a href="#">
                                    <i class="entypo-flow-parallel"></i>
                                    <span>Menu Level 2.1</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <i class="entypo-flow-parallel"></i>
                                    <span>Menu Level 2.2</span>
                                </a>
                                <ul>
                                    <li>
                                        <a href="#">
                                            <i class="entypo-flow-cascade"></i>
                                            <span>Menu Level 3.1</span>
                                        </a>
                                        <ul>
                                            <li>
                                                <a href="#">
                                                    <i class="entypo-flow-branch"></i>
                                                    <span>Menu Level 4.1</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <i class="entypo-flow-cascade"></i>
                                            <span>Menu Level 3.2</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a href="#">
                                    <i class="entypo-flow-parallel"></i>
                                    <span>Menu Level 2.3</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>

    </div>
    <div class="main-content">

        <div class="row">

            <!-- Profile Info and Notifications -->
            <div class="col-md-6 col-sm-8 clearfix">

                <ul class="user-info pull-left pull-none-xsm">

                    <!-- Profile Info -->
                    <li class="profile-info dropdown"><!-- add class "pull-right" if you want to place this from right -->

                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            <img src="static/picture/thumb-1@2x.png" alt="" class="img-circle" width="44">
                            Art Ramadani
                        </a>

                        <ul class="dropdown-menu">

                            <!-- Reverse Caret -->
                            <li class="caret"></li>

                            <!-- Profile sub-links -->
                            <li>
                                <a href="extra-timeline.html">
                                    <i class="entypo-user"></i>
                                    Edit Profile
                                </a>
                            </li>

                            <li>
                                <a href="mailbox.html">
                                    <i class="entypo-mail"></i>
                                    Inbox
                                </a>
                            </li>

                            <li>
                                <a href="extra-calendar.html">
                                    <i class="entypo-calendar"></i>
                                    Calendar
                                </a>
                            </li>

                            <li>
                                <a href="#">
                                    <i class="entypo-clipboard"></i>
                                    Tasks
                                </a>
                            </li>
                        </ul>
                    </li>

                </ul>

                <ul class="user-info pull-left pull-right-xs pull-none-xsm">

                    <!-- Raw Notifications -->
                    <li class="notifications dropdown">

                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
                            <i class="entypo-attention"></i>
                            <span class="badge badge-info">6</span>
                        </a>

                        <ul class="dropdown-menu">
                            <li class="top">
                                <p class="small">
                                    <a href="#" class="pull-right">Mark all Read</a>
                                    You have <strong>3</strong> new notifications.
                                </p>
                            </li>

                            <li>
                                <ul class="dropdown-menu-list scroller">
                                    <li class="unread notification-success">
                                        <a href="#">
                                            <i class="entypo-user-add pull-right"></i>

                                            <span class="line">
					<strong>New user registered</strong>
				</span>

                                            <span class="line small">
					30 seconds ago
				</span>
                                        </a>
                                    </li>

                                    <li class="unread notification-secondary">
                                        <a href="#">
                                            <i class="entypo-heart pull-right"></i>

                                            <span class="line">
					<strong>Someone special liked this</strong>
				</span>

                                            <span class="line small">
					2 minutes ago
				</span>
                                        </a>
                                    </li>

                                    <li class="notification-primary">
                                        <a href="#">
                                            <i class="entypo-user pull-right"></i>

                                            <span class="line">
					<strong>Privacy settings have been changed</strong>
				</span>

                                            <span class="line small">
					3 hours ago
				</span>
                                        </a>
                                    </li>

                                    <li class="notification-danger">
                                        <a href="#">
                                            <i class="entypo-cancel-circled pull-right"></i>

                                            <span class="line">
					John cancelled the event
				</span>

                                            <span class="line small">
					9 hours ago
				</span>
                                        </a>
                                    </li>

                                    <li class="notification-info">
                                        <a href="#">
                                            <i class="entypo-info pull-right"></i>

                                            <span class="line">
					The server is status is stable
				</span>

                                            <span class="line small">
					yesterday at 10:30am
				</span>
                                        </a>
                                    </li>

                                    <li class="notification-warning">
                                        <a href="#">
                                            <i class="entypo-rss pull-right"></i>

                                            <span class="line">
					New comments waiting approval
				</span>

                                            <span class="line small">
					last week
				</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>

                            <li class="external">
                                <a href="#">View all notifications</a>
                            </li>				</ul>

                    </li>

                    <!-- Message Notifications -->
                    <li class="notifications dropdown">

                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
                            <i class="entypo-mail"></i>
                            <span class="badge badge-secondary">10</span>
                        </a>

                        <ul class="dropdown-menu">
                            <li>
                                <ul class="dropdown-menu-list scroller">
                                    <li class="active">
                                        <a href="#">
				<span class="image pull-right">
					<img src="static/picture/thumb-1.png" alt="" class="img-circle">
				</span>

                                            <span class="line">
					<strong>Luc Chartier</strong>
					- yesterday
				</span>

                                            <span class="line desc small">
					This ain’t our first item, it is the best of the rest.
				</span>
                                        </a>
                                    </li>

                                    <li class="active">
                                        <a href="#">
				<span class="image pull-right">
					<img src="static/picture/thumb-2.png" alt="" class="img-circle">
				</span>

                                            <span class="line">
					<strong>Salma Nyberg</strong>
					- 2 days ago
				</span>

                                            <span class="line desc small">
					Oh he decisively impression attachment friendship so if everything.
				</span>
                                        </a>
                                    </li>

                                    <li>
                                        <a href="#">
				<span class="image pull-right">
					<img src="static/picture/thumb-3.png" alt="" class="img-circle">
				</span>

                                            <span class="line">
					Hayden Cartwright
					- a week ago
				</span>

                                            <span class="line desc small">
					Whose her enjoy chief new young. Felicity if ye required likewise so doubtful.
				</span>
                                        </a>
                                    </li>

                                    <li>
                                        <a href="#">
				<span class="image pull-right">
					<img src="static/picture/thumb-4.png" alt="" class="img-circle">
				</span>

                                            <span class="line">
					Sandra Eberhardt
					- 16 days ago
				</span>

                                            <span class="line desc small">
					On so attention necessary at by provision otherwise existence direction.
				</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>

                            <li class="external">
                                <a href="mailbox.html">All Messages</a>
                            </li>				</ul>

                    </li>

                    <!-- Task Notifications -->
                    <li class="notifications dropdown">

                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
                            <i class="entypo-list"></i>
                            <span class="badge badge-warning">1</span>
                        </a>

                        <ul class="dropdown-menu">
                            <li class="top">
                                <p>You have 6 pending tasks</p>
                            </li>

                            <li>
                                <ul class="dropdown-menu-list scroller">
                                    <li>
                                        <a href="#">
				<span class="task">
					<span class="desc">Procurement</span>
					<span class="percent">27%</span>
				</span>

                                            <span class="progress">
					<span style="width: 27%;" class="progress-bar progress-bar-success">
						<span class="sr-only">27% Complete</span>
					</span>
				</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
				<span class="task">
					<span class="desc">App Development</span>
					<span class="percent">83%</span>
				</span>

                                            <span class="progress progress-striped">
					<span style="width: 83%;" class="progress-bar progress-bar-danger">
						<span class="sr-only">83% Complete</span>
					</span>
				</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
				<span class="task">
					<span class="desc">HTML Slicing</span>
					<span class="percent">91%</span>
				</span>

                                            <span class="progress">
					<span style="width: 91%;" class="progress-bar progress-bar-success">
						<span class="sr-only">91% Complete</span>
					</span>
				</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
				<span class="task">
					<span class="desc">Database Repair</span>
					<span class="percent">12%</span>
				</span>

                                            <span class="progress progress-striped">
					<span style="width: 12%;" class="progress-bar progress-bar-warning">
						<span class="sr-only">12% Complete</span>
					</span>
				</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
				<span class="task">
					<span class="desc">Backup Create Progress</span>
					<span class="percent">54%</span>
				</span>

                                            <span class="progress progress-striped">
					<span style="width: 54%;" class="progress-bar progress-bar-info">
						<span class="sr-only">54% Complete</span>
					</span>
				</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
				<span class="task">
					<span class="desc">Upgrade Progress</span>
					<span class="percent">17%</span>
				</span>

                                            <span class="progress progress-striped">
					<span style="width: 17%;" class="progress-bar progress-bar-important">
						<span class="sr-only">17% Complete</span>
					</span>
				</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>

                            <li class="external">
                                <a href="#">See all tasks</a>
                            </li>				</ul>

                    </li>

                </ul>

            </div>


            <!-- Raw Links -->
            <div class="col-md-6 col-sm-4 clearfix hidden-xs">

                <ul class="list-inline links-list pull-right">

                    <!-- Language Selector -->			<li class="dropdown language-selector">

                    Language: &nbsp;
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-close-others="true">
                        <img src="static/picture/flag-uk.png">
                    </a>

                    <ul class="dropdown-menu pull-right">
                        <li>
                            <a href="#">
                                <img src="static/picture/flag-de.png">
                                <span>Deutsch</span>
                            </a>
                        </li>
                        <li class="active">
                            <a href="#">
                                <img src="static/picture/flag-uk.png">
                                <span>English</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="static/picture/flag-fr.png">
                                <span>François</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="static/picture/flag-al.png">
                                <span>Shqip</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="static/picture/flag-es.png">
                                <span>Español</span>
                            </a>
                        </li>
                    </ul>

                </li>

                    <li class="sep"></li>


                    <li>
                        <a href="#" data-toggle="chat" data-animate="1" data-collapse-sidebar="1">
                            <i class="entypo-chat"></i>
                            Chat

                            <span class="badge badge-success chat-notifications-badge is-hidden">0</span>
                        </a>
                    </li>

                    <li class="sep"></li>

                    <li>
                        <a href="extra-login.html">
                            Log Out <i class="entypo-logout right"></i>
                        </a>
                    </li>
                </ul>

            </div>

        </div>

        <hr>
        <ol class="breadcrumb bc-3">
            <li>
                <a href="index.html"><i class="entypo-home"></i>Home</a>
            </li>
            <li class="active">

                <strong>Charts</strong>
            </li>
        </ol>
        <h2>Charts</h2>

        <br>



        <div class="row">
            <div class="col-md-12">

                <div class="panel panel-primary">

                    <div class="panel-heading">
                        <div class="panel-title">Morris Charts</div>

                        <div class="panel-options">
                            <a href="#sample-modal" data-toggle="modal" data-target="#sample-modal-dialog-1" class="bg"><i class="entypo-cog"></i></a>
                            <a href="#" data-rel="collapse"><i class="entypo-down-open"></i></a>
                            <a href="#" data-rel="reload"><i class="entypo-arrows-ccw"></i></a>
                            <a href="#" data-rel="close"><i class="entypo-cancel"></i></a>
                        </div>
                    </div>

                    <table class="table table-bordered">
                        <tbody>
                        <tr>
                            <td width="50%">
                                <strong>Area Chart</strong>
                                <br>
                                <div id="chart10" style="height: 300px"></div>
                            </td>
                            <td>
                                <strong>Line Chart</strong>
                                <br>
                                <div id="chart8" style="height: 300px"></div>
                            </td>
                        </tr>
                        </tbody>
                    </table>

                    <table class="table table-bordered">
                        <tbody>
                        <tr>
                            <td width="50%">
                                <strong>Bar Charts</strong>
                                <br>

                                <div id="chart3" style="height: 250px"></div>
                            </td>
                            <td>
                                <strong>Bars Stacked</strong>
                                <br>
                                <div id="chart4" style="height: 250px"></div>
                            </td>
                        </tr>
                        </tbody>
                    </table>

                    <table class="table table-bordered">
                        <tbody>
                        <tr>
                            <td width="33%">
                                <strong>Donut Charts</strong>
                                <br>
                                <div id="chart5" style="height: 250px"></div>
                            </td>
                            <td width="33%">
                                <strong>Colored</strong>
                                <br>
                                <div id="chart6" style="height: 250px"></div>
                            </td>
                            <td width="33%">
                                <strong>Formatted</strong>
                                <br>
                                <div id="chart7" style="height: 250px"></div>
                            </td>
                        </tr>
                        </tbody>
                    </table>

                    <table class="table table-bordered">
                        <tbody>
                        <tr>
                            <td>
                                <strong>Line Chart</strong>
                                <br>
                                <div id="chart9" style="height: 300px"></div>
                            </td>
                        </tr>
                        </tbody>
                    </table>

                </div>

            </div>
        </div>



        <div class="row">
        </div>





        <div class="row">
            <div class="col-md-7">

                <div class="panel panel-primary">

                    <div class="panel-heading">
                        <div class="panel-title">Peity Charts - Minimal Charts</div>

                        <div class="panel-options">
                            <a href="#sample-modal" data-toggle="modal" data-target="#sample-modal-dialog-1" class="bg"><i class="entypo-cog"></i></a>
                            <a href="#" data-rel="collapse"><i class="entypo-down-open"></i></a>
                            <a href="#" data-rel="reload"><i class="entypo-arrows-ccw"></i></a>
                            <a href="#" data-rel="close"><i class="entypo-cancel"></i></a>
                        </div>
                    </div>

                    <table class="table table-bordered">
                        <thead>
                        <tr>
                            <th width="15%">Graph</th>
                            <th>Data Type</th>
                            <th width="30%">Total</th>
                        </tr>
                        </thead>

                        <tbody>
                        <tr>
                            <td>
                                <span class="updating-chart">5,3,9,6,5,9,7,3,5,2,5,3,9,6,5,9,7,3,5,2</span>
                            </td>
                            <td>
                                Realtime Stats - Currently Active Users
                            </td>
                            <td>
                                <span class="label label-info">Online</span>
                                <span id="peity-right-now">10 users</span>
                            </td>
                        </tr>

                        <tr>
                            <td>
                                <span class="line">3,5,1,6,2,1,1,6,7</span>
                            </td>
                            <td>
                                Visits
                            </td>
                            <td>
                                16,436
                            </td>
                        </tr>

                        <tr>
                            <td>
                                <span class="line">2,4,4,1,2,3,1,1,2,6,5,1,7,8,4,2,3</span>
                            </td>
                            <td>
                                Unique Visits
                            </td>
                            <td>
                                11,321
                            </td>
                        </tr>

                        <tr>
                            <td>
                                <span class="bar">5,3,9,6,5,9,7,3,5,2,7,3,2,9,10,6,4,9,7,8</span>
                            </td>
                            <td>Bounce Rate</td>
                            <td>35.42%</td>
                        </tr>

                        <tr>
                            <td>
                                <span class="bar">4,5,1,6,7,7,3,2,9,10,6,4,9,7,1,3,9,10,12</span>
                            </td>
                            <td>New Visits <span class="label label-success">3.39% Increase</span></td>
                            <td>12.67%</td>
                        </tr>

                        <tr>
                            <td>
                                <span class="pie">60.1,39.9</span>
                            </td>
                            <td>
                                New Visitor vs Returning Visitor
                            </td>
                            <td>
                                60.1% / 39.9%
                            </td>
                        </tr>

                        <tr>
                            <td>
                                <span class="pie">84.6,15.4</span>
                            </td>
                            <td>
                                Direct vs Referral
                            </td>
                            <td>
                                84.6% / 15.4%
                            </td>
                        </tr>
                        </tbody>
                    </table>

                </div>

            </div>

            <div class="col-md-5">

                <div class="panel panel-primary">

                    <div class="panel-heading">
                        <div class="panel-title">Rickshaw Charts</div>

                        <div class="panel-options">
                            <a href="#sample-modal" data-toggle="modal" data-target="#sample-modal-dialog-1" class="bg"><i class="entypo-cog"></i></a>
                            <a href="#" data-rel="collapse"><i class="entypo-down-open"></i></a>
                            <a href="#" data-rel="reload"><i class="entypo-arrows-ccw"></i></a>
                            <a href="#" data-rel="close"><i class="entypo-cancel"></i></a>
                        </div>
                    </div>


                    <div class="panel-body">

                        <strong>Stacked Area</strong>
                        <br>

                        <div id="chart1"></div>

                    </div>


                    <div class="panel-body">

                        <strong>Mixture</strong>
                        <br>

                        <div id="chart2"></div>

                    </div>

                </div>

            </div>
        </div>



        <script type="text/javascript">
            jQuery(document).ready(function($)
            {
                $('.inlinebar').sparkline('html', {type: 'bar', barColor: '#ff6264'} );
                $('.inlinebar-2').sparkline('html', {type: 'bar', barColor: '#445982'} );
                $('.inlinebar-3').sparkline('html', {type: 'bar', barColor: '#00b19d'} );
                $('.bar-2').sparkline([ [1,4], [2, 3], [3, 2], [4, 1] ], { type: 'bar' });
                $('.pie-2').sparkline('html', {type: 'pie',borderWidth: 0, sliceColors: ['#3d4554', '#ee4749','#00b19d']});
                $('.linechart').sparkline();


                $(".pie-large").sparkline([3,2,5], {
                    type: 'pie',
                    width: '150px ',
                    height: '150px',
                    sliceColors: ['#ee4749', '#c13638','#fe9193']

                });

                $(".line-large").sparkline([5,6,7,9,10,5,3,4,5,4,6,7, ], {
                    type: 'line',
                    width: '320px ',
                    height: '150px',
                    lineColor: '#ff4e50',
                    highlightLineColor: '#ff8889',
                    highlightSpotColor: '#b22425',
                    minSpotColor: '#ff4e50',
                    maxSpotColor: '#ff4e50',
                    fillColor: '#f79696',
                    lineWidth: 2,
                    spotRadius: 4.5,
                    normalRangeColor: '#ed4949'
                });


                $(".bar-large").sparkline([5,6,7,2,1,0,4,3,5,7,2,4], {
                    type: 'bar',
                    barColor: '#ff6264',
                    height: '150px',
                    barWidth: 10,
                    barSpacing: 2
                });
            });
        </script>


        <h2>Sparkline Charts</h2>
        <br>

        <div class="row">
            <div class="col-md-12">

                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <div class="panel-title">User Activity</div>

                        <div class="panel-options">
                            <a href="#sample-modal" data-toggle="modal" data-target="#sample-modal-dialog-3" class="bg"><i class="entypo-cog"></i></a>
                            <a href="#" data-rel="collapse"><i class="entypo-down-open"></i></a>
                            <a href="#" data-rel="reload"><i class="entypo-arrows-ccw"></i></a>
                            <a href="#" data-rel="close"><i class="entypo-cancel"></i></a>
                        </div>
                    </div>

                    <table class="table table-bordered table-responsive">
                        <thead>
                        <tr>
                            <th>Activity</th>
                            <th>Name</th>
                            <th>Position</th>
                        </tr>
                        </thead>

                        <tbody>
                        <tr>
                            <td><span class="inlinebar">4,3,5,4,5,6</span></td>
                            <td>Art Ramadani</td>
                            <td>CEO</td>
                        </tr>

                        <tr>
                            <td><span class="inlinebar-3">5,3,2,5,4,5</span></td>
                            <td>Arlind Nushi</td>
                            <td>Co-Founder</td>
                        </tr>

                        <tr>
                            <td><span class="inlinebar-2">1,3,4,5,3,5</span></td>
                            <td>Filan Fisteku</td>
                            <td>Member</td>
                        </tr>

                        <tr>
                            <td><span class="bar-2">1:4,2:3,3:2,4:1</span></td>
                            <td>Arber Nushi</td>
                            <td>Manager</td>
                        </tr>

                        <tr>
                            <td><span class="pie-2">3,4,6</span></td>
                            <td>Eroll Maxhuni</td>
                            <td>Developer</td>
                        </tr>

                        <tr>
                            <td><span class="linechart">5,3,2,5,4,5,7,6,3</span></td>
                            <td>Arjan Halili</td>
                            <td>Pre-Press Designer</td>
                        </tr>
                        </tbody>
                    </table>
                </div>

            </div>
        </div>


        <div class="row">

            <div class="col-md-4">

                <div class="panel panel-default" data-collapsed="0"><!-- to apply shadow add class "panel-shadow" -->
                    <!-- panel head -->
                    <div class="panel-heading">
                        <div class="panel-title">Large Chart Pie</div>

                        <div class="panel-options">
                            <a href="#sample-modal" data-toggle="modal" data-target="#sample-modal-dialog-3" class="bg"><i class="entypo-cog"></i></a>
                            <a href="#" data-rel="collapse"><i class="entypo-down-open"></i></a>
                            <a href="#" data-rel="reload"><i class="entypo-arrows-ccw"></i></a>
                            <a href="#" data-rel="close"><i class="entypo-cancel"></i></a>
                        </div>
                    </div>

                    <!-- panel body -->
                    <div class="panel-body">
                        <p>Was certainty remaining engrossed applauded sir how discovery. Bore tall nay many many time yet less. Doubtful for answered one fat indulged margaret sir shutters together. </p>
                        <br>

                        <div class="text-center">
                            <span class="pie-large"></span>
                        </div>
                    </div>
                </div>

            </div>

            <div class="col-md-4">
                <div class="panel panel-default" data-collapsed="0"><!-- to apply shadow add class "panel-shadow" -->
                    <!-- panel head -->
                    <div class="panel-heading">
                        <div class="panel-title">Large Line Chart</div>

                        <div class="panel-options">
                            <a href="#sample-modal" data-toggle="modal" data-target="#sample-modal-dialog-3" class="bg"><i class="entypo-cog"></i></a>
                            <a href="#" data-rel="collapse"><i class="entypo-down-open"></i></a>
                            <a href="#" data-rel="reload"><i class="entypo-arrows-ccw"></i></a>
                            <a href="#" data-rel="close"><i class="entypo-cancel"></i></a>
                        </div>
                    </div>

                    <!-- panel body -->
                    <div class="panel-body">
                        <p>Was certainty remaining engrossed applauded sir how discovery. Bore tall nay many many time yet less. Doubtful for answered one fat indulged margaret sir shutters together. </p>
                        <br>

                        <div class="text-center">
                            <span class="line-large"></span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <div class="panel panel-default" data-collapsed="0"><!-- to apply shadow add class "panel-shadow" -->
                    <!-- panel head -->
                    <div class="panel-heading">
                        <div class="panel-title">Large Bar Chart</div>

                        <div class="panel-options">
                            <a href="#sample-modal" data-toggle="modal" data-target="#sample-modal-dialog-3" class="bg"><i class="entypo-cog"></i></a>
                            <a href="#" data-rel="collapse"><i class="entypo-down-open"></i></a>
                            <a href="#" data-rel="reload"><i class="entypo-arrows-ccw"></i></a>
                            <a href="#" data-rel="close"><i class="entypo-cancel"></i></a>
                        </div>
                    </div>

                    <!-- panel body -->
                    <div class="panel-body">
                        <p>Was certainty remaining engrossed applauded sir how discovery. Bore tall nay many many time yet less. Doubtful for answered one fat indulged margaret sir shutters together. </p>
                        <br>

                        <div class="text-center">
                            <span class="bar-large"></span>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        <!-- Footer -->
        <footer class="main">


            Copyright &copy; 2021.Company name All rights reserved.<a target="_blank" href="https://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a>

        </footer>	</div>


    <div id="chat" class="fixed" data-current-user="Art Ramadani" data-order-by-status="1" data-max-chat-history="25">

        <div class="chat-inner">


            <h2 class="chat-header">
                <a href="#" class="chat-close" data-animate="1"><i class="entypo-cancel"></i></a>

                <i class="entypo-users"></i>
                Chat
                <span class="badge badge-success is-hidden">0</span>
            </h2>


            <div class="chat-group" id="group-1">
                <strong>Favorites</strong>

                <a href="#" id="sample-user-123" data-conversation-history="#sample_history"><span class="user-status is-online"></span> <em>Catherine J. Watkins</em></a>
                <a href="#"><span class="user-status is-online"></span> <em>Nicholas R. Walker</em></a>
                <a href="#"><span class="user-status is-busy"></span> <em>Susan J. Best</em></a>
                <a href="#"><span class="user-status is-offline"></span> <em>Brandon S. Young</em></a>
                <a href="#"><span class="user-status is-idle"></span> <em>Fernando G. Olson</em></a>
            </div>


            <div class="chat-group" id="group-2">
                <strong>Work</strong>

                <a href="#"><span class="user-status is-offline"></span> <em>Robert J. Garcia</em></a>
                <a href="#" data-conversation-history="#sample_history_2"><span class="user-status is-offline"></span> <em>Daniel A. Pena</em></a>
                <a href="#"><span class="user-status is-busy"></span> <em>Rodrigo E. Lozano</em></a>
            </div>


            <div class="chat-group" id="group-3">
                <strong>Social</strong>

                <a href="#"><span class="user-status is-busy"></span> <em>Velma G. Pearson</em></a>
                <a href="#"><span class="user-status is-offline"></span> <em>Margaret R. Dedmon</em></a>
                <a href="#"><span class="user-status is-online"></span> <em>Kathleen M. Canales</em></a>
                <a href="#"><span class="user-status is-offline"></span> <em>Tracy J. Rodriguez</em></a>
            </div>

        </div>

        <!-- conversation template -->
        <div class="chat-conversation">

            <div class="conversation-header">
                <a href="#" class="conversation-close"><i class="entypo-cancel"></i></a>

                <span class="user-status"></span>
                <span class="display-name"></span>
                <small></small>
            </div>

            <ul class="conversation-body">
            </ul>

            <div class="chat-textarea">
                <textarea class="form-control autogrow" placeholder="Type your message"></textarea>
            </div>

        </div>

    </div>


    <!-- Chat Histories -->
    <ul class="chat-history" id="sample_history">
        <li>
            <span class="user">Art Ramadani</span>
            <p>Are you here?</p>
            <span class="time">09:00</span>
        </li>

        <li class="opponent">
            <span class="user">Catherine J. Watkins</span>
            <p>This message is pre-queued.</p>
            <span class="time">09:25</span>
        </li>

        <li class="opponent">
            <span class="user">Catherine J. Watkins</span>
            <p>Whohoo!</p>
            <span class="time">09:26</span>
        </li>

        <li class="opponent unread">
            <span class="user">Catherine J. Watkins</span>
            <p>Do you like it?</p>
            <span class="time">09:27</span>
        </li>
    </ul>




    <!-- Chat Histories -->
    <ul class="chat-history" id="sample_history_2">
        <li class="opponent unread">
            <span class="user">Daniel A. Pena</span>
            <p>I am going out.</p>
            <span class="time">08:21</span>
        </li>

        <li class="opponent unread">
            <span class="user">Daniel A. Pena</span>
            <p>Call me when you see this message.</p>
            <span class="time">08:27</span>
        </li>
    </ul>
</div>





<link rel="stylesheet" href="static/css/rickshaw.min.css">

<!-- Bottom Scripts -->
<script src="static/js/main-gsap.js"></script>
<script src="static/js/jquery-ui-1.10.3.minimal.min.js"></script>
<script src="static/js/bootstrap.js"></script>
<script src="static/js/joinable.js"></script>
<script src="static/js/resizeable.js"></script>
<script src="static/js/neon-api.js"></script>
<script src="static/js/d3.v3.js"></script>
<script src="static/js/rickshaw.min.js"></script>
<script src="static/js/raphael-min.js"></script>
<script src="static/js/morris.min.js"></script>
<script src="static/js/jquery.peity.min.js"></script>
<script src="static/js/neon-charts.js"></script>
<script src="static/js/jquery.sparkline.min.js"></script>
<script src="static/js/neon-chat.js"></script>
<script src="static/js/neon-custom.js"></script>
<script src="static/js/neon-demo.js"></script>

</body>
</html>